<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MCPHub 嵌入示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    .info {
      background-color: #e6f7ff;
      border-left: 4px solid #1890ff;
      padding: 12px;
      margin-bottom: 20px;
      border-radius: 0 4px 4px 0;
    }
    .iframe-container {
      width: 100%;
      height: 600px;
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    .url-display {
      background-color: #f0f0f0;
      padding: 10px;
      border-radius: 4px;
      font-family: monospace;
      margin-bottom: 20px;
      word-break: break-all;
    }
    .controls {
      margin-bottom: 20px;
    }
    button {
      background-color: #1890ff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
    }
    button:hover {
      background-color: #40a9ff;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>MCPHub 嵌入示例</h1>
    
    <div class="info">
      <p>此页面演示如何在第三方网站中嵌入 MCPHub 页面，并且同步更新 URL。</p>
    </div>
    
    <div class="controls">
      <button id="homeBtn">首页</button>
      <button id="serverListBtn">Server 列表</button>
      <button id="internalBtn">内部 Server</button>
    </div>
    
    <div class="url-display" id="currentUrl">当前 MCPHub URL：</div>
    
    <div class="iframe-container">
      <iframe id="mcphubFrame" src="/"></iframe>
    </div>
  </div>

  <script>
    // 获取DOM元素
    const iframe = document.getElementById('mcphubFrame');
    const urlDisplay = document.getElementById('currentUrl');
    const homeBtn = document.getElementById('homeBtn');
    const serverListBtn = document.getElementById('serverListBtn');
    const internalBtn = document.getElementById('internalBtn');
    
    // 更新URL显示
    function updateUrlDisplay(url) {
      urlDisplay.textContent = '当前 MCPHub URL：' + url;
    }
    
    // 初始URL
    updateUrlDisplay(iframe.src);
    
    // 监听来自iframe的消息
    window.addEventListener('message', (event) => {
      // 确保消息来自我们的域
      if (event.origin === window.location.origin) {
        const data = event.data;
        
        // 处理URL变化事件
        if (data && data.type === 'mcp-url-change') {
          updateUrlDisplay(data.url);
          
          // 可选：更新父页面的历史记录
          // window.history.replaceState(null, '', '/embed?mcphub=' + encodeURIComponent(data.url));
        }
      }
    });
    
    // 在iframe加载完成后发送ready消息
    iframe.addEventListener('load', () => {
      iframe.contentWindow.postMessage({
        type: 'mcphub-parent-ready'
      }, window.location.origin);
    });
    
    // 导航按钮
    homeBtn.addEventListener('click', () => {
      iframe.src = '/';
    });
    
    serverListBtn.addEventListener('click', () => {
      iframe.src = '/servers';
    });
    
    internalBtn.addEventListener('click', () => {
      iframe.src = '/servers/internal';
    });
  </script>
</body>
</html> 